<template>
  <div class="advertising">
    <div class="header">
      <p class="header-title">模板审核</p>
    </div>
    <div class='flex-row flex-justify-content-fs flex-align-items-c' style="margin-top:30px;">
      <div>
        <el-radio
          v-model="radioIndex"
          v-for="(item,index) in radioArr"
          :key="index"
          :label="index"
        >{{item}}</el-radio>
      </div>
      <div class='flex-row flex-justify-content-fs flex-align-items-c' style="margin-left:100px;">
        <el-input v-model="ADNameInput" placeholder="请输入广告主名称"></el-input>
        <el-button type="primary" @click="seachAdvertiser" style="margin-left:50px;">搜索</el-button>
      </div>
    </div>
    <div class="ad_content flex-row flex-wrap flex-justify-content-fs flex-align-items-c">
      <div
        class="ad_item"
        v-for="(item,index) in adDataList"
        :key="index"
        @click="selectedADTemplate(index)"
      >
        <div class="flex-row flex-align-items-c flex-justify-content-sb">
          <span v-if="item.username!==''">来自：{{item.username}}</span>
          <span>{{item.name}}</span>
          <span  style="padding:5px 0;">投放设备：{{item.machine}}台</span>
        </div>
        <div>
          <video v-if="item.type == 'video'" :src="item.album"></video>
          <img v-else :src="item.album" alt />
        </div>
        <div class="mask">
          <img :src="stateImg[item.stats]" alt />
        </div>
      </div>
    </div>
    <div class="flex-row flex-justify-content-c" style="margin-top:50px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pageMeta.total"
        :current-page="pageMeta.current_page"
        :page-size="pageSizes"
        :hide-on-single-page="hideValue"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      adDataList: [],
      ADNameInput:'',
      radioArr: ["全部", "待审核", "已通过", "已拒绝"],
      radioIndex: 0,
      deviceID: "",
      pageSizes: 30,
      currentPage: 1,
      pageMeta: [],
      hideValue: true,
      page: 1,
      sort: "DESC",
      stateImg: [
        require("../../assets/images/under.png"),
        require("../../assets/images/shenhe-success.png"),
        require("../../assets/images/pass.png")
      ],
    };
  },
  computed: {},
  created() {
    // console.log(this.$route.params)
    this.$route.params.id
      ? (this.deviceID = this.$route.params.id)
      : (this.deviceID = "");
    this.getAdList();
  },
  mounted() {},
  watch: {},
  methods: {
    //  选择跳转模板详情
    selectedADTemplate(index) {
      console.log(this.adDataList[index].username);
      console.log(index);
      this.$router.push({
        path: "material",
        query: {
          id: this.adDataList[index].id,
          isCheck:true
        }
      });
    },
    // 分页查询
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAdList();
    },
    // 获取模板列表
    getAdList() {
      let code = `advertiser_id=${
        JSON.parse(sessionStorage.getItem("userinfo")).id
      }&advertiser_name=${this.ADNameInput}&page_size=${this.pageSizes}&page=${
        this.currentPage
      }&sort=${this.sort}&state=${this.radioIndex}`;
      // let params = {
      //   advertiser_id:JSON.parse(sessionStorage.getItem("userinfo")).id,
      //   advertiser_name:this.ADNameInput,
      //   page_size:this.pageSizes,
      //   page:this.currentPage,
      //   sort:this.sort,
      //   state:this.radioIndex
      // }
      console.log(code);
      let RASCODE = this.$getCode(code);
      this.http
        .examineList({
          secret: RASCODE
        })
        .then(res => {
          console.log(res);
          if (res.data.errno == "000") {
            this.adDataList = res.data.result.data;
            this.pageMeta = res.data.result.meta;
            this.hideValue = false;
            this.currentPage = res.data.result.meta.total_pages;
            this.adDataList.forEach((el, index) => {
              this.adDataList[index].isMaks = false;
            });
          } else {
            this.$message.error({
              message: res.data.errmsg
            });
          }
        })
        .catch(err => {});
    },
    seachAdvertiser(){
      this.getAdList();
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
